<!-- 单火车控制 -->
<template>
    <div class="single-train-control-widget">
        <div>
            <span>{{ props.trainAlias || props.trainName }}</span>
            
            <span class="hot-key-enabled" v-if="props.hotKeyEnabled">[快捷键已激活]</span>
            <span class="hot-key-disabled" v-else>[快捷键已禁用]</span>
        </div>
        <div>
            <el-radio v-model="tractionMode" label="reverse">后退</el-radio>
            <el-radio v-model="tractionMode" label="idle">空挡</el-radio>
            <el-radio v-model="tractionMode" label="forward">前进</el-radio>
        </div>
        <div>
            <el-progress type="dashboard" :percentage="throttle"></el-progress>
        </div>
        <el-button-group>
            <el-button v-for="button of buttons" :type="button.value <= throttle ? 'primary' : 'default'"
                :key="button.name" @click="onThrottleButtonClick(button.value)">
                {{ button.name }}
            </el-button>
        </el-button-group>
    </div>
</template>
<style lang="css">
.single-train-control-widget {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    max-width: 320px;
    min-width: 320px;
}

.hot-key-disabled {
    color: #A8ABB2;
}

.hot-key-enabled {
    color: #409EFF;
}
</style>
<script lang="ts" setup>
import { TractionModes, WSSpeedControlMsg } from '@/models';
import { ref, defineExpose, defineProps, computed } from 'vue';
import { send } from './ws';
// import { ElText } from "element-plus";
const props = defineProps({
    // trainConfig:
    trainAlias: { type: String, required: true },
    trainName: { type: String, required: true },
    hotKeyEnabled: { type: Boolean, required: true },
    // activated: { type: Boolean, required: true }
})

const throttle = ref<number>(0)
const tractionMode = ref<TractionModes>("idle")
// const disabled = computed(() => {
//     return !props.activated
// })
// 从菜单中搜索对应的组件

const buttons = ref<{ "name": string, 'text'?: string, "value": number, key: string }[]>([
    { "name": "0", value: 0, key: '0' },
    { "name": "1", value: 11, key: '1' },
    { "name": "2", value: 22, key: '2' },
    { "name": "3", value: 33, key: "3" },
    { "name": "4", value: 44, key: "4" },
    { "name": "5", value: 55, key: "5" },
    { "name": "6", value: 66, key: "6" },
    { "name": "7", value: 77, key: "7" },
    { "name": "8", value: 88, key: "8" },
    { "name": "9", value: 100, key: "9" },
])

const onThrottleButtonClick = (throttleValue: number) => {
    updateSpeedControl(throttleValue, tractionMode.value)
}

// 仅接受"0"-"9"这些字符串
const updateSpeedLevel = (key: string) => {
    const btn = buttons.value.find((btn) => btn.key == key)
    if (!btn) {
        console.error(`cannot find btn for event ${key}`)
        return
    }
    updateSpeedControl(btn.value)
}

const updateDirection = (key: "=" | "-") => {
    const nextStates: {
        [key: string]: {
            [key in TractionModes]: TractionModes }
    } = {
        // =号就是+号，一个意思
        "=": { "idle": "forward", "reverse": "idle", "forward": "forward" },
        "-": { "idle": "reverse", "forward": "idle", "reverse": "reverse" },
    }
    updateSpeedControl(throttle.value, nextStates[key][tractionMode.value])
}

const updateSpeedControl = (throttleValue: number, tractionModeValue?: TractionModes) => {
    throttle.value = throttleValue
    if (tractionModeValue != null) {
        tractionMode.value = tractionModeValue
    }
    const msg: WSSpeedControlMsg = {
        type: "throttle",
        train_name: props.trainName,
        throttle_value: throttle.value,
        traction_mode: tractionMode.value
    }
    send(JSON.stringify(msg))
}

defineExpose({
    updateSpeedControl,
    updateDirection,
    updateSpeedLevel
})
</script>